<template>
  <div class="record-index" ref="recordBoxRef">
    <div class="btn-fill" @click="toFill">我要填写</div>
    <div class="record-main">
      <div class="record-item" v-for="(item, index) of recordList" :key="index">
        <p class="record-date">{{ item.date }}</p>
        <van-steps
          direction="vertical"
          active-color="#303133"
          inactive-color="#303133"
        >
          <van-step
            class="record-item"
            v-for="(sItem, inx) in item.info"
            :key="inx"
          >
            <template v-slot:inactive-icon>
              <svg-icon name="circle-point" />
            </template>

            <template v-slot:active-icon>
              <svg-icon name="circle-point" />
            </template>
            <div class="record-content" @click="toEdit(sItem)">
              <span class="visit-time">{{ sItem.visitDate }}</span>
              <span style="margin-right: 6px">{{
                getDay(sItem.visitDate)
              }}</span>
              <van-image
                class="visit-avatar"
                :src="sItem.avatar || AvatarImg"
              />
              <span class="visit-active">{{ sItem.visitor }}</span>
              <span>拜访了</span>
              <span class="visit-active">{{ sItem.visitees }}</span>
            </div>
          </van-step>
        </van-steps>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
import { recordListAll } from "./fetchData";
import AvatarImg from "@/assets/avatar.png";

const route = useRoute();
const router = useRouter();
const emit = defineEmits(["recordInfo", "edit"]);
const recordList = ref<Record<string, any>[]>([]);
const recordBoxRef = ref<any>();

function toEdit(item: any) {
  router.push({
    path: "recordDetail",
    query: {
      customId: route.query.id,
      recordId: item.id,
      type: "1"
    }
  });
}

function toFill() {
  router.push({
    path: "recordDetail",
    query: {
      customId: route.query.id,
      type: "1"
    }
  });
}

function getDay(date: string) {
  const arr = ["日", "一", "二", "三", "四", "五", "六"];
  const day = dayjs(date).day();
  return "周" + arr[day];
}

function getData() {
  recordList.value = [];
  if (!route.query.id) return;
  recordListAll(route.query.id as string).then((res: any) => {
    for (const i in res) {
      recordList.value.push({
        date: i,
        info: res[i]
      });
    }
    console.log(669, recordList.value);
    emit("recordInfo", recordList.value);
  });
}

getData();

defineExpose({ recordBoxRef, getData });

defineComponent({ name: "RecordIndex" });
</script>

<style scoped lang="less">
.record-index {
  position: relative;
  width: 100%;

  .btn-fill {
    //position: absolute;
    //top: 0;
    //left: 50%;
    //transform: translate(-50%, -100%);
    width: 5rem;
    margin: 0.5rem auto;
    padding: 0.5rem 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(296deg, #ff4350 0%, #ff4553 35%, #ffadb3 100%);
    box-shadow: 0 0.2rem 0.2rem 0 rgba(255, 67, 80, 0.4);
    border-radius: 0.4rem;
  }

  .record-main {
    width: 100%;

    .record-item {
      margin-bottom: 0.6rem;

      .record-date {
        display: inline-block;
        margin-bottom: 0.6rem;
        padding: 0 0.6rem;
        color: #2e3244;
        font-size: 0.9rem;
        background: #eee;
      }

      .visit-time {
        margin-right: 0.4rem;
      }

      .visit-active {
        margin: 0 0.2rem;
        word-break: break-all;
        color: #ff4350;
      }

      .record-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 0.6rem;
      }

      .visit-avatar {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 0.8rem;

        :deep(img) {
          border-radius: 1rem;
        }
      }
    }
  }

  :deep(.van-step__circle-container) {
    top: 1.7rem !important;
  }

  :deep(.van-step__line) {
    top: 2rem !important;
    background-color: #c0c4cc !important;
  }
}
</style>
